<template>
  <div>
    <el-drawer
      :visible.sync="drawerVisible"
      :modal-append-to-body="false"
      append-to-body
      :with-header="false"
      :wrapperClosable="false"
      size="300px"
    >
    <i class="el-icon-close drawer-close" @click="drawerVisible=false"></i>
      <el-form ref="form" :model="form" class="form">
        <el-form-item label="节点名称">
          <el-input v-model="form.name" @input="onChangeName" maxlength="8"></el-input>
        </el-form-item>
      </el-form>
    </el-drawer>
    <menuItem text="节点配置" @click.native="onConfigNode" />
    <menuItem  text="删除" @click.native="onDelete" />
  </div>
</template>

<script>
import menuItem from "../menu-item";
import Vue from "vue";
export default {
  components: { menuItem },
  props: {
    data: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return { drawerVisible: false, form: { name: "" } };
  },
  methods: {
    onConfigNode() {
      // this.form.name = this.data.text;
      // this.drawerVisible = true;
      // this.$emit('close')
      //  Vue.prototype.$eventBus.$emit('configNode',this.data)
    },
    onDelete() {
      this.$emit('delete')
    },
    onChangeName() {
      if (this.form.name.trim()) {
        this.$emit("changeName", this.form.name.trim());
      }
    },
  },
};
</script>

<style scoped lang="less">
.form {
  padding: 20px 20px;
}
.drawer-close{
  position: absolute;
  right: 10px;
  top:10px
}
</style>